import React, { useState } from 'react'

export default function CounterHook() {
  //解构返回的数组，元素一：当前状态的值不传则为undefined。元素二：是指状态值的函数。
  const [count, setCount] = useState(0);
  const [counts, setCounts] = useState(() => 10);

  // const [info, setCounts] = useState({name: "yzh", age: 18});
  // console.log(info);

  function handleBtnClick() {
    // setCounts(counts + 10);
    // setCounts(counts + 10);
    // setCounts(counts + 10);
    // setCounts(counts + 10);   每次累加10 内部会做一个合并操作

    setCounts((preState) => preState + 10);
    setCounts((preState) => preState + 10);
    setCounts((preState) => preState + 10);
    setCounts((preState) => preState + 10); //传入函数 每次累加40 内部会执行每一次操作
  }

  return (
    <div>
      <h2>当前计数：{count}</h2>
      <h2>当前计数2：{counts}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <button onClick={e => setCount(count - 1)}>-1</button>
      <button onClick={handleBtnClick}>+10</button>
      {/* <button onClick={e => setCounts({name: "luffy", age: 20})}>1111111111</button> */}
    </div>
  )
}
